<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background: red;
				
				/* 定位属性*/
				
				/* 脱离文档流*/
				/* position: absolute;				 */
				
				/* 不脱离文档流 */
				position: relative;
			}
			.smallBox{
				width: 100px;
				height: 100px;
				background: blue;
				
				/* body*/
				position: absolute;
				right: 0;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<!-- 
		 绝对定位使用口诀(子绝父相)
		 1.相对定位弊端
		 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
		 
		 2.绝对定位弊端
		 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
		 
		 3.子绝父相
		 子元素用绝对定位, 父元素用相对定位		 
		 -->
		 
		 <div class="box">
		 	<div class="smallBox"></div>
		 </div>
		 
		 <p>如果能走的时候 <em>请不要站着</em>,
		 	能跑的时候 <strong>请不要走</strong>,
		 	能飞的时候请不要跑.</p>
		 
		 
	</body>
</html>
